<template>
  <div class="container">
    <el-row class="top-search">
      <el-col style="text-align:right;">
        <select-version-name v-model="listQuery.appNo" />
        <date-range-picker
          v-model="datePicker1"
          class="w-240"
          size="small"
          type="daterange"
          align="right"
          unlink-panels
          :range-separator="$t('to')"
          :start-placeholder="$t('start_date')"
          :end-placeholder="$t('end_date')"
          value-format="yyyy-MM-dd"
          @change="timeChange"
        />
        <el-select v-model="listQuery.platform" class="w-140" size="small">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="listQuery.appVersion" class="w-140" size="small">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="listQuery.lang" class="w-140" size="small">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="listQuery.country" class="w-140" size="small">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="listQuery.userSelectType"
          class="w-140"
          size="small"
        >
          <el-option
            v-for="item in options5"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          />
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="search1()"
          >{{ $t('search') }}</el-button
        >
      </el-col>
    </el-row>
    <el-row class="p-t-15">
      <el-col>
        <el-tabs ref="tabs" v-model="activeName" type="card">
          <el-tab-pane :label="tabTitle" name="first">
            <div>
              <div class="title">
                <p>
                  {{ isUser1 ? $t('active_user') : $t('active_member')
                  }} {{ $t('real_time_distribution') }}
                </p>
                <div class="btn">
                  <el-button
                    class="fr m-l-10"
                    size="small"
                    @click="toExport('user', 1)"
                    >{{ $t('export_doc') }}</el-button
                  >
                </div>
              </div>
              <div class="echart">
                <div
                  id="user"
                  :style="{ width: echartWidth, height: '380px' }"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="tabTitle2" name="second">
            <div>
              <div class="title">
                <p>
                  {{ isUser1 ? $t('active_user') : $t('active_member')
                  }} {{ $t('count_of_people_reading_news') }}
                </p>
                <div class="btn">
                  <el-button
                    class="fr m-l-10"
                    size="small"
                    @click="toExport('read', 1)"
                    >{{ $t('export_doc') }}</el-button
                  >
                </div>
              </div>
              <div class="echart">
                <div
                  id="read"
                  :style="{ width: echartWidth, height: '380px' }"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <div
      class="dividing-line"
      style="margin:10px 0; border: 1px solid #e6e6e6"
    />
    <el-row>
      <el-col class="search">
        <el-select
          v-model="listQuery2.userSelectType"
          class="w-140"
          size="small"
        >
          <el-option
            v-for="item in options5"
            :key="item.value"
            :label="$t(item.label)"
            :value="item.value"
          />
        </el-select>
        <date-range-picker
          v-model="datePicker2"
          type="daterange"
          class="w-240"
          size="small"
          align="right"
          unlink-panels
          :range-separator="$t('to')"
          :start-placeholder="$t('start_date')"
          :end-placeholder="$t('end_date')"
          value-format="yyyy-MM-dd"
          shortcuts="B"
          @change="timeChange2"
        />
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="search2()"
          >{{ $t('search') }}</el-button
        >
      </el-col>
    </el-row>
    <el-row class="bottom-echart">
      <el-col>
        <div class="echart fl">
          <div class="title">
            <p>
              {{ isUser1 ? $t('active_user') : $t('active_member')
              }} {{ $t('percentage_of_language') }}
            </p>
            <div class="btn">
              <el-button
                class="fr m-l-10"
                size="small"
                @click="toExport('lan', 2)"
                >{{ $t('export_doc') }}</el-button
              >
            </div>
          </div>
          <div id="hot" :style="{ width: '710px', height: '380px' }" />
        </div>
        <div class="echart fr">
          <div class="title">
            <p>
              {{ isUser1 ? $t('active_user') : $t('active_member')
              }} {{ $t('region_analysis') }}
            </p>
            <div class="btn">
              <el-button
                class="fr m-l-10"
                size="small"
                @click="toExport('top', 2)"
                >{{ $t('export_doc') }}</el-button
              >
            </div>
          </div>
          <div class="list">
            <ul>
              <li class="list-title">
                <span>{{ $t('top_ten') }}</span>
                <span
                  >{{ isUser1 ? $t('active_user') : $t('active_member') }}（{{
                    $t('user')
                  }}）</span
                >
              </li>
              <li v-for="(item, index) in topData" :key="index">
                <span>{{ item.location }}</span>
                <span class="red-num">{{ item.activeCount }}</span>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts';
import { dateShortcutKeyJS } from '@/mixins/index';
import timeUtils from '@/utils/timeHandle';
import { exportJsonToExcel, formatJson } from '@/utils/excel/Export2Excel';
import {
  getAppVersionListApi,
  getActiveOrNumListApi,
  getActiveLanguageListApi,
  getLacationTopApi,
  getNewsReadListApi
} from '@/api/user-analysis';
import SelectVersionName from '@/components/SelectForm/VersionName.vue';
// 用户导出
const HeadWithOutWeek = {
  user: [
    {
      prop: 'date',
      label: 'time'
    },
    {
      prop: 'activeCount',
      label: 'active_user_person'
    },
    {
      prop: 'wakeCount',
      label: 'wakeup_times_times'
    }
  ],
  read: [
    {
      prop: 'date',
      label: 'time'
    },
    {
      prop: 'readUserCount',
      label: 'count_of_users_reading_news_person'
    },
    {
      prop: 'percent',
      label: 'percentage_of_users_reading_news'
    }
  ],
  lan: [
    {
      prop: 'timeRange',
      label: 'time'
    },
    {
      prop: 'language',
      label: 'language'
    },
    {
      prop: 'activeCount',
      label: 'count_of_users_person'
    },
    {
      prop: 'percent',
      label: 'percentage'
    }
  ],
  top: [
    {
      prop: 'timeRange',
      label: 'time'
    },
    {
      prop: 'location',
      label: 'region'
    },
    {
      prop: 'activeCount',
      label: 'active_user_person'
    }
  ]
};
const HeadWithWeek = {
  user: [
    {
      prop: 'date',
      label: 'date'
    },
    {
      prop: 'dayOfWeek',
      label: 'week'
    },
    {
      prop: 'activeCount',
      label: 'active_user_person'
    },
    {
      prop: 'wakeCount',
      label: 'wakeup_times_times'
    }
  ],
  read: [
    {
      prop: 'date',
      label: 'date'
    },
    {
      prop: 'dayOfWeek',
      label: 'week'
    },
    {
      prop: 'readUserCount',
      label: 'count_of_users_reading_news_person'
    },
    {
      prop: 'percent',
      label: 'percentage_of_users_reading_news'
    }
  ],
  lan: [
    {
      prop: 'timeRange',
      label: 'time'
    },
    {
      prop: 'language',
      label: 'language'
    },
    {
      prop: 'activeCount',
      label: 'count_of_users_person'
    },
    {
      prop: 'percent',
      label: 'percentage'
    }
  ],
  top: [
    {
      prop: 'timeRange',
      label: 'time'
    },
    {
      prop: 'location',
      label: 'region'
    },
    {
      prop: 'activeCount',
      label: 'active_user_person'
    }
  ]
};
// 会员导出
const HeadWithOutWeekMember = {
  user: [
    {
      prop: 'date',
      label: 'time'
    },
    {
      prop: 'activeCount',
      label: 'active_member_person'
    },
    {
      prop: 'wakeCount',
      label: 'wakeup_times_times'
    }
  ],
  read: [
    {
      prop: 'date',
      label: 'time'
    },
    {
      prop: 'activeUserCount',
      label: 'count_of_member_reading_news_person'
    },
    {
      prop: 'percent',
      label: 'percentage_of_members_reading_news'
    }
  ],
  lan: [
    {
      prop: 'timeRange',
      label: 'time'
    },
    {
      prop: 'language',
      label: 'language'
    },
    {
      prop: 'activeCount',
      label: 'count_of_members_person'
    },
    {
      prop: 'percent',
      label: 'percentage'
    }
  ],
  top: [
    {
      prop: 'timeRange',
      label: 'time'
    },
    {
      prop: 'location',
      label: 'region'
    },
    {
      prop: 'activeCount',
      label: 'active_member_person'
    }
  ]
};
const HeadWithWeekMember = {
  user: [
    {
      prop: 'date',
      label: 'date'
    },
    {
      prop: 'dayOfWeek',
      label: 'week'
    },
    {
      prop: 'activeCount',
      label: 'active_member_person'
    },
    {
      prop: 'wakeCount',
      label: 'wakeup_times_times'
    }
  ],
  read: [
    {
      prop: 'date',
      label: 'date'
    },
    {
      prop: 'dayOfWeek',
      label: 'week'
    },
    {
      prop: 'activeUserCount',
      label: 'count_of_member_reading_news_person'
    },
    {
      prop: 'percent',
      label: 'percentage_of_members_reading_news'
    }
  ],
  lan: [
    {
      prop: 'timeRange',
      label: 'time'
    },
    {
      prop: 'language',
      label: 'language'
    },
    {
      prop: 'activeCount',
      label: 'count_of_members_person'
    },
    {
      prop: 'percent',
      label: 'percentage'
    }
  ],
  top: [
    {
      prop: 'timeRange',
      label: 'time'
    },
    {
      prop: 'location',
      label: 'region'
    },
    {
      prop: 'activeCount',
      label: 'active_member_person'
    }
  ]
};

export default {
  components: {
    SelectVersionName
  },
  mixins: [dateShortcutKeyJS],
  data() {
    return {
      dateType: {
        0: this.$t('unit_hour'),
        1: this.$t('unit_day'),
        2: this.$t('unit_week'),
        3: this.$t('unit_month')
      },
      tableName: {
        user: this.$t('real_time_distribution_of_active_user'),
        read: this.$t('count_of_people_reading_news_of_active_user'),
        lan: this.$t('percentage_of_language_of_active_user'),
        top: this.$t('region_analysis_of_active_user')
      },
      tableHead: HeadWithOutWeek,
      onlyOneDay: false,
      separatedDays: null, // 搜索时间相隔天数
      options1: [
        {
          value: -1,
          label: this.$t('all_channels')
        },
        {
          value: 1,
          label: 'Android'
        },
        {
          value: 2,
          label: 'IOS'
        }
      ],
      options2: [
        {
          value: null,
          label: this.$t('all_versions')
        }
      ],
      options3: [
        {
          value: -1,
          label: this.$t('all_system_languages')
        },
        {
          value: 1,
          label: this.$t('chinese')
        },
        {
          value: 2,
          label: this.$t('khmer')
        },
        {
          value: 3,
          label: this.$t('english')
        }
      ],
      options4: [
        {
          value: null,
          label: this.$t('region')
        },
        {
          value: 'China',
          label: this.$t('chainn')
        },
        {
          value: 'Cambodia',
          label: this.$t('cambodia')
        },
        {
          value: 'Other',
          label: this.$t('others')
        }
      ],
      options5: [
        {
          value: 1,
          label: this.$t('user')
        },
        {
          value: 2,
          label: this.$t('member')
        }
      ],
      datePicker1: [
        timeUtils.timeHandle(new Date().getTime(), 'date'),
        timeUtils.timeHandle(new Date().getTime(), 'date')
      ],
      datePicker2: [
        timeUtils.timeHandle(
          new Date().getTime() - 3600 * 1000 * 24 * 1,
          'date'
        ),
        timeUtils.timeHandle(
          new Date().getTime() - 3600 * 1000 * 24 * 1,
          'date'
        )
      ],
      listQuery: {
        appNo: -1,
        startTime: timeUtils.timeHandle(new Date().getTime(), 'date'),
        endTime: timeUtils.timeHandle(new Date().getTime(), 'date'),
        appVersion: null, // 版本
        lang: -1, // 操作语言 1:中文、2:柬文、3:英文
        platform: -1, // 渠道 1:安卓; 2:ios
        country: null, // 地区
        userSelectType: 1, // 1:用户 2:会员
        dateType: 0 // 0:小时; 1:日期; 2:周;3:月;
      },
      listQuery2: {
        startTime: timeUtils.timeHandle(
          new Date().getTime() - 3600 * 1000 * 24 * 1,
          'date'
        ),
        endTime: timeUtils.timeHandle(
          new Date().getTime() - 3600 * 1000 * 24 * 1,
          'date'
        ),
        userSelectType: 1, // 用户会员
        dateType: 1 // 0:小时; 1:日期; 2:周;3:月;
      },
      activeName: 'first',
      list: {
        activeCount: [], // 活跃用户
        wakeCount: [], // 唤醒次数
        readUserCount: [], // 阅读资讯人数
        percent: [] // 阅读资讯人数占比
      },
      xData1: [], // 保存活跃用户实时分布x轴数据
      xData2: [], // 保存活跃阅读资讯人数x轴数据
      legend: {
        1: [this.$t('active_user'), this.$t('wakeup_times')],
        2: [
          this.$t('count_of_users_reading_news'),
          this.$t('percentage_of_users_reading_news')
        ]
      },
      topData: [], // top10数据
      languageData: [],
      exportData: {
        // 导出表格数据
        user: [],
        read: [],
        lan: [],
        top: []
      },
      isUser1: true,
      isUser2: true,
      tabTitle: this.$t('real_time_distribution_of_active_user'),
      tabTitle2: this.$t('count_of_people_reading_news_of_active_user'),
      echartWidth: null,
      myChart1: null,
      myChart2: null,
      isFirstRender: true // 不是第一次渲染
    };
  },
  created() {
    this.getAppVersion();
  },
  mounted() {
    this.getWidth();
    this.getData1();
    this.getData2();
    this.getData3();
  },
  methods: {
    timeChange(time) {
      if (!time) return;
      const startTime = Date.parse(time[0]);
      const endTime = Date.parse(time[1]);
      const Days = Math.floor(
        Math.abs(endTime - startTime) / (24 * 3600 * 1000)
      );
      this.separatedDays = Days;
      if (Days == 0) {
        this.listQuery.dateType = 0;
      } else if (Days <= 31 && Days > 0) {
        this.listQuery.dateType = 1;
      } else if (Days > 31 && Days <= 48) {
        this.listQuery.dateType = 2;
      } else if (Days > 48) {
        this.listQuery.dateType = 3;
      }
    },

    timeChange2(time) {
      if (!time) return;
      const startTime = Date.parse(time[0]);
      const endTime = Date.parse(time[1]);
      const Days = Math.floor(
        Math.abs(endTime - startTime) / (24 * 3600 * 1000)
      );
      this.separatedDays = Days;
      if (Days <= 40) {
        this.listQuery2.dateType = 1;
      } else if (Days > 40 && Days <= 112) {
        this.listQuery2.dateType = 2;
      } else if (Days > 112) {
        this.listQuery2.dateType = 3;
      }
    },

    getWidth() {
      this.$nextTick(function() {
        this.echartWidth = this.$refs['tabs'].$el.clientWidth + 'px';
      });
    },

    getAppVersion() {
      const that = this;
      getAppVersionListApi().then(res => {
        if (res.code == 200) {
          res.data.forEach(function(item) {
            const obj = {
              value: item,
              label: item
            };
            that.options2.push(obj);
          });
        }
      });
    },

    search1() {
      if (!this.datePicker1) {
        this.$message.warning(this.$t('please_enter_a_search_time'), true);
        return;
      }
      if (this.separatedDays === 0) {
        this.onlyOneDay = true;
      } else {
        this.onlyOneDay = false;
      }

      this.listQuery.startTime = this.datePicker1[0];
      this.listQuery.endTime = this.datePicker1[1];

      this.getData1();
      this.getData2();
    },

    search2() {
      if (!this.datePicker2) {
        this.$message.warning(this.$t('please_enter_a_search_time'), true);
        return;
      }
      this.listQuery2.startTime = this.datePicker2[0];
      this.listQuery2.endTime = this.datePicker2[1];
      this.getData3();
    },

    getData1() {
      // 活跃用户和唤醒次数数据
      this.myChart1 = echarts.init(document.getElementById('user'));
      this.myChart1.showLoading();

      getActiveOrNumListApi(this.listQuery).then(res => {
        if (res.code == 200) {
          const getData = res.data;

          // 返回小时 拼接上日期
          if (this.listQuery.dateType == 0) {
            this.exportData.user = JSON.parse(JSON.stringify(res.data));
            this.exportData.user.forEach(item => {
              item.date = this.datePicker1[1] + ' ' + item.date + ':00 ';
            });
          } else {
            this.exportData.user = res.data;
          }

          Object.keys(this.list).forEach(key => {
            this.list[key] = getData.map(item => item[key]);
          });

          const that = this;
          that.xData1 = [];
          getData.forEach(function(item) {
            that.xData1.push(item.date);
          });

          if (this.listQuery.userSelectType == 1) {
            this.isUser1 = true;
            this.tabTitle = this.$t('real_time_distribution_of_active_user');
            this.tableName.user = this.$t(
              'real_time_distribution_of_active_user'
            );
            this.legend[1] = [this.$t('active_user'), this.$t('wakeup_times')];
          } else {
            this.isUser1 = false;
            this.tabTitle = this.$t('real_time_distribution_of_active_member');
            this.tableName.user = this.$t(
              'real_time_distribution_of_active_member'
            );
            this.legend[1] = [
              this.$t('active_member'),
              this.$t('wakeup_times')
            ];
          }

          this.upDateEchart1();
        }
      });
    },

    getData2() {
      // 阅读资讯人数占比
      if (!this.isFirstRender) {
        var myChart = echarts.init(document.getElementById('read'));
        myChart.showLoading();
      }

      getNewsReadListApi(this.listQuery).then(res => {
        if (res.code == 200) {
          const getData = res.data;

          // 返回小时 拼接上日期
          if (this.listQuery.dateType == 0) {
            this.exportData.read = JSON.parse(JSON.stringify(res.data));
            this.exportData.read.forEach(item => {
              item.date = this.datePicker1[1] + ' ' + item.date + ':00 ';
            });
          } else {
            this.exportData.read = res.data;
          }

          // 百分数截掉后面的%
          getData.map(item => {
            return (item.percent = Number(item.percent.slice(0, -1)) || 0);
          });

          Object.keys(this.list).forEach(key => {
            this.list[key] = getData.map(item => item[key]);
          });

          const that = this;
          that.xData2 = [];
          getData.forEach(function(item) {
            that.xData2.push(item.date);
          });

          if (this.listQuery.userSelectType == 1) {
            this.isUser1 = true;
            this.tabTitle2 = this.$t(
              'count_of_people_reading_news_of_active_user'
            );
            this.tableName.read = this.$t(
              'count_of_people_reading_news_of_active_user'
            );
            this.legend[2] = [
              this.$t('count_of_users_reading_news'),
              this.$t('percentage_of_users_reading_news')
            ];
          } else {
            this.isUser1 = false;
            this.tabTitle2 = this.$t(
              'count_of_people_reading_news_of_active_user'
            );
            this.tableName.read = this.$t(
              'count_of_people_reading_news_of_active_user'
            );
            this.legend[2] = [
              this.$t('count_of_member_reading_news'),
              this.$t('percentage_of_members_reading_news')
            ];
          }

          this.$nextTick(function() {
            this.upDateEchart2();
          });
        }
      });
    },

    getData3() {
      var myChart3 = echarts.init(document.getElementById('hot'));
      myChart3.showLoading();

      getActiveLanguageListApi(this.listQuery2).then(res => {
        // 获取语言占比
        if (res.code == 200) {
          this.languageData = res.data;
          this.exportData.lan = res.data;

          if (this.listQuery2.userSelectType == 1) {
            this.isUser2 = true;
            this.tableName.lan = this.$t(
              'percentage_of_language_of_active_user'
            );
            this.tableName.top = this.$t('region_analysis_of_active_user');
          } else {
            this.isUser2 = false;
            this.tableName.lan = this.$t(
              'percentage_of_language_of_active_member'
            );
            this.tableName.top = this.$t('region_analysis_of_active_member');
          }

          this.upDateEchart3();
        }
      });

      // 获取top10
      getLacationTopApi(this.listQuery2).then(res => {
        if (res.code == 200) {
          this.topData = res.data || [];
          this.exportData.top = res.data;
        }
      });
    },

    upDateEchart1() {
      this.myChart1 = echarts.init(document.getElementById('user'));
      this.myChart1.showLoading();

      const option = {
        color: this.$store.state.app.eChartColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {},
        legend: {
          data: this.legend[1],
          right: 60,
          top: 10
        },
        grid: {
          left: 60,
          right: 60
        },
        xAxis: [
          {
            name: this.dateType[this.listQuery.dateType],
            nameTextStyle: {
              padding: [40, 0, 18, 0]
            },
            type: 'category',
            data: this.xData1, // x轴数据
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.$t('unit_person'),
            min: 0,
            max: Math.ceil(Math.max(...this.list['activeCount'])),
            interval: Math.ceil(Math.max(...this.list['activeCount']) / 5),
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: this.$t('unit_times'),
            min: 0,
            max: Math.ceil(Math.max(...this.list['wakeCount'])),
            interval: Math.ceil(Math.max(...this.list['wakeCount']) / 5),
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: this.isUser1
              ? this.$t('active_user')
              : this.$t('active_member'),
            type: 'line',
            data: this.list['activeCount']
          },
          {
            name: this.$t('wakeup_times'),
            type: 'line',
            data: this.list['wakeCount'],
            yAxisIndex: 1
          }
        ]
      };
      this.myChart1.setOption(option, true);
      this.myChart1.hideLoading();
    },

    upDateEchart2() {
      this.myChart2 = echarts.init(document.getElementById('read'));
      this.myChart2.showLoading();

      const option = {
        color: this.$store.state.app.eChartColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {},
        legend: {
          data: this.legend[2],
          right: 60,
          top: 10
        },
        grid: {
          left: 60,
          right: 60
        },
        xAxis: [
          {
            name: this.dateType[this.listQuery.dateType],
            nameTextStyle: {
              padding: [40, 0, 18, 0]
            },
            type: 'category',
            data: this.xData2, // x轴数据
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            name: this.$t('unit_person'),
            type: 'value',
            min: 0,
            max: Math.ceil(Math.max(...this.list['readUserCount'])),
            interval: Math.ceil(Math.max(...this.list['readUserCount']) / 5),
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: this.isUser1
              ? this.$t('count_of_users_reading_news')
              : this.$t('count_of_member_reading_news'),
            type: 'bar',
            data: this.list['readUserCount']
          },
          {
            name: this.isUser1
              ? this.$t('percentage_of_users_reading_news')
              : this.$t('percentage_of_members_reading_news'),
            type: 'line',
            data: this.list['percent'],
            yAxisIndex: 1
          }
        ]
      };

      this.myChart2.setOption(option, true);
      this.myChart2.hideLoading();
      this.isFirstRender = false;
    },

    upDateEchart3() {
      if (this.languageData.length < 3) return;
      const legendData = [];
      const lanMap = {
        'zh-Hans': this.$t('chinese'),
        'km-KH': this.$t('khmer'),
        'en-US': this.$t('english')
      };
      for (var i = 0; i < this.languageData.length; i++) {
        const item = this.languageData[i];
        legendData.push(lanMap[item.language]);
      }

      const self = this;

      var myChart3 = echarts.init(document.getElementById('hot'));
      myChart3.showLoading();

      const option = {
        color: this.$store.state.app.eChartColor,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          left: 0,
          right: 0
        },
        legend: {
          orient: 'vertical',
          right: 0,
          top: '50%',
          itemGap: 15,
          selectedMode: false, // 取消图例上的点击事件
          formatter: function(name) {
            var activeCount, percent;
            self.languageData.forEach(item => {
              if (lanMap[item.language] == name) {
                activeCount = item.activeCount;
                percent = item.percent;
              }
            });
            var arr = [
              '{a|' + name + '}',
              '{b|' + '  |  ' + percent + '}',
              '{c|' + activeCount + '人}'
            ];
            return arr.join(' ');
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                align: 'left',
                width: 50
              },
              b: {
                fontSize: 12,
                align: 'left',
                width: 70
              }
            }
          },
          data: legendData
        },
        series: [
          {
            name: this.$t('visiting_source'),
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {
                value: this.languageData[0].activeCount || 0,
                name: legendData[0]
              },
              {
                value: this.languageData[1].activeCount || 0,
                name: legendData[1]
              },
              {
                value: this.languageData[2].activeCount || 0,
                name: legendData[2]
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      myChart3.setOption(option, true);
      myChart3.hideLoading();
    },

    refresh() {
      this.listQuery.dateType = 1;
      this.search1();
    },

    showHour() {
      this.listQuery.dateType = 0;
      this.search1();
    },

    toExport(exportName, type) {
      switch (type) {
        case 1:
          if (this.listQuery.dateType === 1) {
            if (this.isUser1) {
              this.tableHead = HeadWithWeek;
            } else {
              this.tableHead = HeadWithWeekMember;
            }
          } else {
            if (this.isUser1) {
              this.tableHead = HeadWithOutWeek;
            } else {
              this.tableHead = HeadWithOutWeekMember;
            }
          }
          break;
        case 2:
          if (this.listQuery2.dateType === 1) {
            if (this.isUser2) {
              this.tableHead = HeadWithWeek;
            } else {
              this.tableHead = HeadWithWeekMember;
            }
          } else {
            if (this.isUser2) {
              this.tableHead = HeadWithOutWeek;
            } else {
              this.tableHead = HeadWithOutWeekMember;
            }
          }
          break;
      }

      const exprtTime = timeUtils.timeHandle(new Date().getTime(), 'date');
      const tHeader = this.tableHead[exportName].map(item =>
        this.$t(item.label)
      );
      const tKey = this.tableHead[exportName].map(item => item.prop);
      const data = formatJson(tKey, this.exportData[exportName]); // 数据格式化
      const fileName = this.tableName[exportName] + exprtTime;
      exportJsonToExcel(tHeader, data, fileName); // 导出文件
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 15px;
  .w-140 {
    width: 140px;
  }
  .w-240 {
    width: 240px;
  }
  .title {
    height: 32px;
    position: relative;
    p {
      font-size: 22px;
      line-height: 32px;
      text-align: center;
    }
    .btn {
      width: 400px;
      height: 32px;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .echart {
    width: 100%;
  }
  .search {
    text-align: right;
    padding: 15px;
  }
  // 底部的echart
  .bottom-echart {
    .echart {
      position: relative;
      width: 45%;
      .title {
        height: 32px;
        position: relative;
        p {
          font-size: 22px;
          line-height: 32px;
          text-align: left;
        }
        .btn {
          width: 400px;
          height: 32px;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
      .list {
        width: 508px;
        width: 100%;
        padding-top: 20px;
        li {
          display: flex;
          justify-content: space-between;

          font-size: 14px;
          line-height: 48px;
          border-bottom: 1px solid #ccc;
          .red-num {
            color: #f44336;
          }
        }
        .list-title {
          font-size: 18px;
          line-height: 56px;
        }
      }
    }
  }
}
</style>
